<template>
  <div class="recommed">
      <h3 class="title">送恋人/爱情鲜花</h3>
      <div class="recommend-items">
          <div class="item" @click="clickItem(item.id)" v-for="item in items" :key="item.id" >
            <img class="item-pic" :src="item.pic" alt="">
            <div class="item-info">
                <h5>{{item.name}}</h5>
                <p class="item-p0">{{item.tags| subStr }}</p>
                <p class="item-p">{{item.characteristic | subStr }}</p>
                <p class="item-p1">{{item.purchaseNotes}}</p>
                <div class="item-action">
                    <p class="price">{{item.minPrice | currency('￥') }}</p>
                    <van-icon color="#FF734C" 
                      @click.stop="clickAddItem(item)"
                     class-prefix="icon" name="gouwuchekong">
                    </van-icon>
                </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import { currency, subStr } from '@/filters'
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    clickAddItem (item) {
      this.$emit('clickAddItem',item)
    },
    clickItem (id) {
      this.$emit('clickItem', id)
    }
  },
  filters: {
    currency,
    subStr
  }
}
</script>

<style lang="scss" scoped>
    .title{
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        margin: 15px 0;
        font-weight: bold;
    }
    .recommend-items{
        .item{
            border-radius: 10px;
            height: 185px;
            background-color: #fff;
            display: flex;
            margin-bottom: 12px;
            .item-pic{
                border-radius: 10px;
                width: 170px;
                height: 185px;
            }
            /deep/.item-info{
                flex: 1;
                height: 185px;
                display: flex;
                flex-direction: column;
                padding:10px;
                h5{
                    font-size: 14px;
                    color: #232628;
                    line-height: 20px;
                    margin-bottom: 10px;
                }
                .item-p0{
                  font-size: 14px;
                  line-height: 20px;
                  margin-bottom: 10px;
                }
                .item-p{
                  font-size: 12px;
                  line-height: 20px;
                  color: #666;
                   margin-bottom: 5px;
                }
                .item-p1{
                  font-size: 12px;
                  line-height: 20px;
                  border-radius: 10px;
                  // border: 1px solid red;
                  background-color: #FFF0EC;
                  color: red;
                }
                .item-action{
                    display: flex;
                    height: 50px;
                    align-items: center;
                    justify-content: space-between;
                    .price{
                        font-size: 16px;
                        font-weight: 600;
                    }
                }
            }
        }
    }
</style>
